<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isFold ? '60px' : '250px'">
        <MainMenu :is-fold="isFold" />
      </el-aside>
      <el-container>
        <el-header>
          <MainHeader @fold-change="handleFoldChange" />
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import MainMenu from '@/views/main/menu/MainMenuView.vue'
import MainHeader from '@/views/main/header/MainHeaderView.vue'

const isFold = ref(false)
function handleFoldChange(flag: boolean) {
  isFold.value = flag
}
</script>
<style scope>
.common-layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.el-container {
  height: 100%;
}

/**
* 为.el-header和.el-footer类设置样式
* 这些样式应用于页面的头部和底部元素，以确保它们具有相同的背景色、文字颜色、文本对齐方式和行高
*/
.el-header,
.el-footer {
  background-color: #fff;
  /* 设置背景颜色为白色 */
  color: #333;
  /* 设置文字颜色为深灰色 */
  text-align: center;
  /* 设置文本居中对齐 */
  line-height: 60px;
  /* 设置行高为60px，以适应一般头部和底部的高度需求 */
}

/**
* 设置侧边栏的样式
* 包括背景色、文字颜色、对齐方式和行高
*/
.el-aside {
  /* 过渡效果设置：0.3秒内线性变化宽度 */
  transition: width 0.3s linear;
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 300px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 30px;
}
</style>
